<script setup>

import CommonBox from "../../components/CommonBox.vue";
import {ref} from "vue";


let indicator = [{
  text: '供应商A',
  max: 100
},
  {
    text: '供应商B',
    max: 100
  },
  {
    text: '供应商C',
    max: 100
  },
  {
    text: '供应商D',
    max: 100
  },
  {
    text: '供应商E',
    max: 100
  },
  {
    text: '供应商F',
    max: 100
  }
]

const option = ref({
  legend: {
    textStyle: {
      color: 'white'
    }
  },
  xAxis: {
    show: false,
    type: 'category',
  },
  yAxis: {
    type: 'value'
  },
  radar: [{
    indicator: indicator,
    center: ['50%', '50%'],
    // shape: 'circle',
    radius: "40%",
    // startAngle: 60,
    splitNumber: 4,
    name: {
      formatter: '{value}',
      textStyle: {
        color: 'rgba(0,254,255, 0.6)',

      }
    },

    axisLine: {
      lineStyle: {
        color: 'rgba(255, 255, 255, 0.5)'
      }
    },
    splitLine: {
      lineStyle: {
        color: 'rgba(255, 255, 255, 0.5)'
      }
    }
  }],
  series: [
    {
      name: '到货及时率',
      type: 'radar',
      indicator: indicator,
      itemStyle: {
      },
      data: [{
        name: '到货及时率',
        value: [92.66, 90, 84, 36, 81.33, 46.66]
      }, {
        name: '到货合格率',
        value: [53.33, 55.31, 69.33, 91.32, 46, 74]
      }]
    }

  ]
});

</script>

<template>
  <common-box>
    <div class="chart-header">
      供应商及时率和合格率
    </div>
    <div style="height: 15em;width: 100%;">
      <v-chart :option="option"></v-chart>
    </div>
  </common-box>
</template>

<style scoped>
.chart-header {
  text-align: center;
  font-size: 1.5em;
  padding: 0.2em 0 0.2em 1em;
}
</style>